<div class="card card-primary">
    <div class="card-body">
        <!--筛选-->
        <div class="filter-panel d-none">
            <form action="" method="get" class="frm-filter">
                <div class="row">
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group row">
                            <label class="col-lg-4 col-md-4 col-sm-4 col-xs-6 mb-0 pt-2 text-right">{:lang("Title")}</label>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6">
                                <input type="text" class="form-control" name="title" placeholder="{:lang("Title")}" data-op="like %...%">
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group row">
                            <label class="col-lg-4 col-md-4 col-sm-4 col-xs-6 mb-0 pt-2 text-right">{:lang('Suffix')}</label>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6">
                                <select name="ext" class="form-control">
                                    <option value="">{:lang('All')}</option>
                                    {volist id="vo" name="ext"}
                                    <option value="{$vo}">{$vo}</option>
                                    {/volist}
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group row">
                            <label class="col-lg-4 col-md-4 col-sm-4 col-xs-6 mb-0 pt-2 text-right">{:lang('File size')}</label>
                            <div class="col-lg-8 col-md-8 col-sm-8 col-xs-6">
                                <input type="hidden" name="size" data-op="BETWEEN">

                                <div class="row">
                                    <div class="col-6">
                                        <input type="number" class="form-control" id="size_start" placeholder="{:lang('Unit byte')}">
                                    </div>
                                    <div class="col-6">
                                        <input type="number" class="form-control" id="size_end" placeholder="{:lang('Unit byte')}">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12">
                        <div class="form-group text-center">
                            <input type="reset" class="btn btn-default" value="{:lang('Reset')}">
                            <input type="submit" class="btn btn-primary ml-2" value="{:lang('Search')}">
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div id="toolbar" class="toolbar">
            <button type="button" class="btn btn-secondary btn-refresh" data-toggle="tooltip" data-placement="top" title="{:lang('Reload page')}"><i class="fas fa-redo-alt"></i></button>
            &nbsp;
            {if has_rule('common/upload')}
            <div class="file-upload-group">
                <button type="button" class="btn btn-primary btn-uploads"
                        data-multiple="true"
                        data-mimetype="*">
                    <i class="fas fa-arrow-alt-circle-up"></i> {:lang('Upload')}
                </button>
            </div>
            {/if}

            <button type="button" class="btn btn-disabled btn-danger disabled btn-del " data-url="{:url('/routine.attachment/del')}"><i class="fas fa-trash-alt"></i>
                {:lang('Delete')}</button>
        </div>
        <table id="table"
               data-del="{if has_rule('del')}{:url('/routine.attachment/del')}{/if}"
               data-edit="{if has_rule('edit')}{:url('/routine.attachment/edit')}{/if}"
        ></table>
    </div>
</div>

{block:script}
<script>
    require(['jquery','layer','cmsTable'], function ($, undefined, cmsTable) {
        $(function () {
            cmsTable.init({
                url: "{:url('/routine.attachment/index')}",
                showToggle: false,
                search: false,
                pagination: true,
                customFilter: true,
                pageSize: 10,
                escape: false,
                sortName: 'update_time',
                columns: [{
                    field: 'state',
                    checkbox: true,
                },{
                    field: 'user_id',
                    title: '{:lang("User ID")}',
                    visible: false
                },{
                    field: 'user_name',
                    title: '{:lang("Username")}',
                },{
                    field: 'title',
                    title: '{:lang("Title")}',
                    formatter: function (value, row, index, field) {
                        if (value.length>27) {
                            return '<span title="'+value+'">'+(value.substring(0,27)+'...')+'</span>'
                        }
                        return value;
                    }
                },{
                    field: 'cdn_url',
                    title: '{:lang("Preview")}',
                    formatter: cmsTable.formatter.image,
                    events: cmsTable.events.image
                },{
                    field: 'path',
                    title: '{:lang("Path")}',
                    visible: false
                },{
                    field: 'size_text',
                    title: '{:lang("Size (kb)")}',
                },{
                    field: 'storage',
                    title: '{:lang("Storage")}',
                },{
                    field: 'ext',
                    title: '{:lang("Suffix")}',
                },{
                    field: 'md5',
                    title: 'md5',
                    visible: false
                },{
                    field: 'mime_type',
                    title: '{:lang("Mime type")}',
                    visible: false
                },{
                    field: 'remark',
                    title: '{:lang("Remark")}',
                    visible: false
                },{
                    field: 'create_time',
                    title: '{:lang("Creation time")}',
                },{
                    field: 'update_time',
                    title: '{:lang("Update time")}',
                    visible: false
                },{
                    field: 'operate',
                    title: '{:lang("Operate")}',
                    formatter: cmsTable.formatter.operate,
                    events: cmsTable.events.operate
                }]});
        })
    })
</script>
{/block:script}